<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-form ref="form" :model="form" label-width="100px" :class="{'mobile-form': isMobile}" style="margin-top: 10px">
        <el-col :span="6" :xs="24" :sm="8">
          <!-- <div class="base_info" style="margin-top: 10px">
            <span :style="{ color: theme }">用途</span>
            <el-select v-model="form.purposes" placeholder="请选择用途" :multiple="form.id == undefined"
              style="width: 100%; margin-top: 10px" @change="handleSelectChange">
              <el-option v-for="item in purposeOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div> -->

          <div class="base_info" style="margin-top: 10px">
            <span :style="{ color: theme }">试题分类</span>
            <div>
              <el-input placeholder="请选择课程" v-model="tree_label" clearable style="margin:10px 0" @clear="handleClear">
              </el-input>
              <el-tree ref="tree" :data="courseOptions" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

            </div>
          </div>
          <div class="base_info" style="margin-top: 10px">
            <span :style="{ color: theme }">知识点</span>

            <el-select v-model="form.knowledge" placeholder="请选择知识点" style="width: 100%; margin-top: 10px" clearable
              filterable v-loading="loading">
              <el-option v-for="item in knowledgeOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>

          </div>
        </el-col>
        <el-col :span="18" :xs="24" :sm="16">
          <div class="question_content">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="单选题" name="单选题">
                <Redio :data="form" @reset="reset()" />
              </el-tab-pane>
              <el-tab-pane label="多选题" name="多选题">
                <Select :data="form" @reset="reset()" />
              </el-tab-pane>
              <el-tab-pane label="判断题" name="判断题">
                <Judge :data="form" @reset="reset()" />
              </el-tab-pane>
              <el-tab-pane label="问答题" name="问答题">
                <QueAns :data="form" @reset="reset()" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import {
  categoryTree,
  listKnowledge,
  categoryList,
} from "@/api/vadmin/course/course";

import { questionId, getQuestion } from "@/api/vadmin/question/index";
import Redio from "@/views/vadmin/question/components/redio";
import QueAns from "@/views/vadmin/question/components/que_ans";
import Select from "@/views/vadmin/question/components/select";
import Judge from "@/views/vadmin/question/components/judge";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "newQuestion",
  components: { Redio, QueAns, Select, Judge, Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      count: "", //题目总数
      activeName: "单选题",
      form: {
        course: null,
        knowledge: "",
        sort: 1,
        answer: []
      },
      queryParams: {
        courseId: "",
        courseName: "",
      },
      defaultProps: {
        children: "children",
        label: "label",
      },

      breadList: [],
      //课程分类
      courseName: undefined,
      courseOptions: [],
      knowledgeOptions: [],
      tree_label: "",
      screenWidth: document.body.clientWidth
    };
  },
  // watch: {
  //   // 监听deptId
  //   "form.category": "currDeptChange",
  //   tree_label(newval, old) {},
  // },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
    isMobile() {
      return this.screenWidth < 768;
    }
  },

  created() {
    this.getTreeselect();
    this.getknowledgeList("");

    if (this.$route.params.id || this.$route.params.id !== undefined) {
      this.getList(this.$route.params.id);
    } else {
      this.activeName = "单选题";
      this.reset();
    }
    
    // 监听屏幕宽度变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 移除监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = document.body.clientWidth;
    },
    currDeptChange(val) {
      if (val) {
        // console.log("选择的课程", val);
        this.getknowledgeList(val);
      }
    },
    /** 查询列表 */
    getList(id) {
      this.loading = true;
      questionId(id).then((response) => {
        // console.log(22222, response);

        //es6新方法复制对象，不改变原对象
        var tree_label_temp = { ...response };
        this.tree_label = tree_label_temp.name;
        // console.log(3333, tree_label_temp);
        //表单赋值
        this.form = response;
        this.form.course = response.course.id;
        this.form.knowledge = response.knowledge.id;
        this.activeName = response.type_name;
        this.tree_label = tree_label_temp.course.name;
        // this.getknowledgeList(this.form.category);


        //判断为单选
        if (this.form.type == 1) {
          this.form.answer = this.form.answer[0];
        }

        this.loading = false;
      });
    },

    /** 查询下拉树结构 */
    getTreeselect() {
      categoryTree({ page_size: 1000, page: 1 }).then((response) => {
        this.courseOptions = response;
      });
    },

    getknowledgeList(id) {
      this.loading = true;
      listKnowledge({
        page: 1,
        page_size: 100000,
        category: id,
      }).then((response) => {
        this.knowledgeOptions = response.results;
        this.loading = false;
      });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      this.reset();
    },
    //重置表单
    reset() {
      this.form = {
        answer: [],
        option: [
          { name: "A", content: "", is_right: false },
          { name: "B", content: "", is_right: false },
          { name: "C", content: "", is_right: false },
          { name: "D", content: "", is_right: false },
        ],
        explain: null,
        type_name: "单选题",
        type: "1",
        stem: null,
        score: null,
        knowledge: this.form.knowledge,
        course: this.form.course,
        sort: 1,

      };
    },
    platform(node) {
      // console.log(99, node);
      if (!node.parent) {
        // 若无父节点，则直接返回
        // console.log("无父节点", node);
        return;
      }
      node.isCurrent = false;
      this.breadList.unshift(node.data); // 将value保存起来

      //调用递归
      this.platform(node.parent);
    },
    handleClear() {
      this.form.course = "";
    },
    handleNodeClick(data, node) {
      this.form.knowledge = "";
      this.knowledgeOptions = [];
      this.breadList = [];
      this.platform(node);
      // console.log(111, this.breadList);
      if (this.breadList.length > 0) {
        this.getknowledgeList(this.breadList[this.breadList.length - 1].id);
        this.tree_label = this.breadList[0].label;
        this.form.course = this.breadList[0].id;
      }
    },
    handleSelectChange() {
      this.$forceUpdate()
      // console.log("类型", this.form.purposes, '>>>', this.form.purpose)
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: transparent;
  padding: 0;
}

.mobile-form {
  /* 移动端表单样式 */
  .el-form-item__label {
    padding: 0 0 8px;
    line-height: 1.2;
    text-align: left;
  }
  
  .base_info {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    
    span {
      display: block;
      font-weight: bold;
      margin-bottom: 10px;
      font-size: 15px;
    }
  }
  
  .el-select {
    width: 100%;
  }
  
  .el-tree {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 5px;
  }
  
  .question_content {
    margin-top: 20px;
  }
  
  .el-tabs__header {
    margin-bottom: 15px;
  }
  
  .el-tabs__item {
    padding: 0 12px;
    height: 36px;
    line-height: 36px;
  }
}

@media (max-width: 768px) {
  .el-form-item {
    margin-bottom: 15px;
  }
  
  .el-form-item__content {
    line-height: 1.2;
  }
  
  .el-tabs__nav {
    display: flex;
    width: 100%;
  }
  
  .el-tabs__item {
    flex: 1;
    text-align: center;
  }
}
</style>
